<template>
	<div class="setting">
		<div class="fa">
			<el-button type="primary" style="width: 190px; margin: 20px 0px" @click="hex('FAF5')">
				转十六(HEX)进制
			</el-button>
			<el-tabs tab-position="left" style="width: 100%; height: 100%; box-sizing: border-box">
				<el-tab-pane>
					<template #label>
						<span class="title">左主机</span>
					</template>
					<div>
						<el-row>
							<el-col :span="12" v-for="(i, index) in 64" :key="i">
								<MyInput
									:name="labTable.left_main['z' + (101 + index)]?.name"
									v-model="leftMain['z' + (101 + index)]" />
							</el-col>
						</el-row>
					</div>
				</el-tab-pane>
				<el-tab-pane>
					<template #label>
						<span class="title">右主机</span>
					</template>
					<div>
						<el-row>
							<el-col :span="12" v-for="(i, index) in 64" :key="i">
								<MyInput
									:name="labTable.right_main['z' + (201 + index)]?.name"
									v-model="rightMain['z' + (201 + index)]" />
							</el-col>
						</el-row>
					</div>
				</el-tab-pane>
				<el-tab-pane>
					<template #label>
						<span class="title">发电机1#</span>
					</template>
					<div>
						<el-row>
							<el-col :span="12" v-for="(i, index) in 16" :key="i">
								<MyInput
									:name="labTable.power1['z' + (301 + index)]?.name"
									v-model="powerOne['z' + (301 + index)]" />
							</el-col>
						</el-row>
					</div>
				</el-tab-pane>
				<el-tab-pane>
					<template #label>
						<span class="title">发电机2#</span>
					</template>
					<div>
						<el-row>
							<el-col :span="12" v-for="(i, index) in 16" :key="i">
								<MyInput
									:name="labTable.power2['z' + (317 + index)]?.name"
									v-model="powerTwo['z' + (317 + index)]" />
							</el-col>
						</el-row>
					</div>
				</el-tab-pane>
				<el-tab-pane>
					<template #label>
						<span class="title">发电机3#</span>
					</template>
					<div>
						<el-row>
							<el-col :span="12" v-for="(i, index) in 16" :key="i">
								<MyInput
									:name="labTable.power3['z' + (333 + index)]?.name"
									v-model="powerThree['z' + (333 + index)]" />
							</el-col>
						</el-row>
					</div>
				</el-tab-pane>
				<el-tab-pane>
					<template #label>
						<span class="title">应急发电机</span>
					</template>
					<div>
						<el-row>
							<el-col :span="12" v-for="(i, index) in 16" :key="i">
								<MyInput
									:name="labTable.power_bak['z' + (349 + index)]?.name"
									v-model="powerBak['z' + (349 + index)]" />
							</el-col>
						</el-row>
					</div>
				</el-tab-pane>
				<el-tab-pane>
					<template #label>
						<span class="title">备用机1#</span>
					</template>
					<div>
						<el-row>
							<el-col :span="12" v-for="(i, index) in 16" :key="i">
								<MyInput
									:name="labTable.bak1['z' + (701 + index)]?.name"
									v-model="bakOne['z' + (701 + index)]" />
							</el-col>
						</el-row>
					</div>
				</el-tab-pane>
				<el-tab-pane>
					<template #label>
						<span class="title">备用机2#</span>
					</template>
					<div>
						<el-row>
							<el-col :span="12" v-for="(i, index) in 32" :key="i">
								<MyInput
									:name="labTable.bak2['z' + (801 + index)]?.name"
									v-model="bakTwo['z' + (801 + index)]" />
							</el-col>
						</el-row>
					</div>
				</el-tab-pane>
			</el-tabs>
		</div>
		<div class="fb">
			<el-button type="primary" style="width: 190px; margin: 20px 0px" @click="hex('FBF5')">
				转十六(HEX)进制
			</el-button>
			<el-tabs tab-position="left" style="width: 100%; height: 100%; box-sizing: border-box">
				<el-tab-pane>
					<template #label>
						<span class="title">货油舱</span>
					</template>
					<div>
						<el-row>
							<el-col :span="12" v-for="(i, index) in 80" :key="i">
								<MyInput
									:name="labTable.hycyw['z' + (501 + index)]?.name"
									v-model="hycyw['z' + (501 + index)]" />
							</el-col>
						</el-row>
					</div>
				</el-tab-pane>
				<el-tab-pane>
					<template #label>
						<span class="title">货油泵</span>
					</template>
					<div>
						<el-row>
							<el-col :span="12" v-for="(i, index) in 48" :key="i">
								<MyInput
									:name="labTable.hyb['z' + (601 + index)]?.name"
									v-model="hyb['z' + (601 + index)]" />
							</el-col>
						</el-row>
					</div>
				</el-tab-pane>
				<el-tab-pane>
					<template #label>
						<span class="title">GPS</span>
					</template>
					<div>
						<el-row>
							<el-col :span="20">
								<div>
									帧头$GPGGA,UTC时间,纬度 XXXX.XXXX,N,经度 XXXXX.XXXX,E,使用卫星数量(十六进制)
								</div>
								<el-input type="textarea" maxlength="84" v-model="gpsPostitionDevice"></el-input>
							</el-col>
						</el-row>
					</div>
				</el-tab-pane>
				<el-tab-pane>
					<template #label>
						<span class="title">速度</span>
					</template>
					<div>
						<el-row>
							<el-col :span="20">
								<div>帧头$VDVBW,航速(十六进制)</div>
								<el-input type="textarea" maxlength="24" v-model="shiplogDevice"></el-input>
							</el-col>
						</el-row>
					</div>
				</el-tab-pane>
			</el-tabs>
		</div>
	</div>
	<el-dialog title="船舶配置" v-model="isShow" width="30%">
		<div style="word-break: break-all">{{ confHex }}</div>
		<template #footer>
			<span>
				<el-button type="primary" @click="isShow = false">发送</el-button>
			</span>
		</template>
	</el-dialog>
</template>
<script setup>
import labTable from '@/mixins/table.json'
import MyInput from '@/components/MyInput'
import { reactive } from 'vue'
const isShow = ref(false)
const confHex = ref('')
//FAF5
const leftMain = reactive({})
const rightMain = reactive({})
const powerOne = reactive({})
const powerTwo = reactive({})
const powerThree = reactive({})
const powerBak = reactive({})
const bakOne = reactive({})
const bakTwo = reactive({})
//FBF5
const hycyw = reactive({})
const hyb = reactive({})
const gpsPostitionDevice = ref(
	'000000000000000000000000000000000000000000000000000000000000000000000000000000000000'
)
const shiplogDevice = ref('000000000000000000000000')
const hex = (head) => {
	if (head == 'FAF5') {
		let leftMainString = hexString(leftMain)
		let rightMainString = hexString(rightMain)
		let powerOneString = hexString(powerOne)
		let powerTwoString = hexString(powerTwo)
		let powerThreeString = hexString(powerThree)
		let powerBakString = hexString(powerBak)
		let bakOneString = hexString(bakOne)
		let bakTwoString = hexString(bakTwo)
		confHex.value =
			head +
			leftMainString +
			rightMainString +
			powerOneString +
			powerTwoString +
			powerTwoString +
			powerThreeString +
			powerBakString +
			bakOneString +
			bakTwoString +
			'F33F'
	} else {
		let hycywString = hexString(hycyw)
		let hybString = hexString(hyb)
		let zero131String = ''
		for (let i = 0; i < 132; i++) {
			zero131String += '0'
		}
		let zero44String = ''
		for (let i = 0; i < 44; i++) {
			zero44String += '0'
		}
		let zero228String = ''
		for (let i = 0; i < 228; i++) {
			zero228String += '0'
		}
		if (gpsPostitionDevice.value.length != 84) {
			return alert('GPS长度不对')
		}
		if (shiplogDevice.value.length != 24) {
			return alert('速度长度不对')
		}
		console.log(zero131String)
		confHex.value =
			head +
			hycywString +
			hybString +
			zero131String +
			gpsPostitionDevice.value +
			zero44String +
			shiplogDevice.value +
			zero228String +
			'F33F'
	}
	console.log(confHex.value.length)
	isShow.value = true
}

const hexString = (machine) => {
	let machineString = ''
	for (let item of Object.values(machine)) {
		machineString += item.toString(16).padStart(4, '0').toUpperCase()
	}
	return machineString
}
</script>

<style lang="scss">
.float-element {
	/* 固定定位在左下角 */
	display: none;
}
.setting {
	display: flex;
	width: 100%;
	height: 100%;
	background-color: #d5dce2;
	.fa {
		flex: 1;
		display: flex;
		flex-direction: column;
	}
	.fb {
		flex: 1;
		display: flex;
		flex-direction: column;
	}
	.title {
		width: 150px;
		font-size: 18px;
		text-align: center;
	}
}
.el-col {
	margin-bottom: 10px;
}
.el-tabs__content {
	height: 100%;
	overflow: auto !important;
}
</style>
